<template>
  <div class="addUser">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="170px" class="demo-ruleForm">
      <el-form-item label="所属企业" prop="companyId">
        <el-select class="select-width" v-model="ruleForm.companyId" @change="getProduct" placeholder="请选择">
          <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="所属商品" prop="ptGoodsId">
         <el-select class="select-width" v-model="ruleForm.ptGoodsId" placeholder="请选择所属商品" :disabled="ruleForm.companyId ? false : true">
            <el-option v-for="item in goodsList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
          <span class="red" v-if="goodsList.length < 1">&nbsp;&nbsp;{{goodsTip}}</span>
      </el-form-item>
      <el-form-item label="被服务人姓名" prop="userName">
        <el-input class="input-width" v-model="ruleForm.userName" placeholder="请输入被服务人姓名"/>
      </el-form-item>
      <el-form-item label="被服务人性别" prop="sex">
        <el-select class="select-width" v-model="ruleForm.sex" placeholder="请选择">
          <el-option v-for="item in sexList" :key="item.id" :label="item.dValue" :value="item.dKey"/>
        </el-select>
      </el-form-item>
      <el-form-item label="被服务人证件类型" prop="paperType">
         <el-select class="select-width" v-model="ruleForm.paperType" placeholder="请选择">
            <el-option
              v-for="item in paperTypeList"
              :key="item.id"
              :label="item.dValue"
              :value="item.dKey"
            />
          </el-select>
      </el-form-item>
      <el-form-item label="被服务人证件号码" prop="paper">
        <el-input class="input-width" v-model="ruleForm.paper" placeholder="请输入被服务人证件号码"/>
      </el-form-item>
       <el-form-item label="被服务人电话号码" prop="mobile">
        <el-input class="input-width" v-model="ruleForm.mobile" placeholder="请输入被服务人电话号码"/>
      </el-form-item>
       <el-form-item label="被服务人电子邮件" prop="email">
        <el-input class="input-width" v-model="ruleForm.email" placeholder="请输入被服务人电子邮件"/>
      </el-form-item>
       <el-form-item label="保单号/服务单号" prop="cardNum">
        <el-input class="input-width" v-model="ruleForm.cardNum" placeholder="请输入保单号/服务单号"/>
      </el-form-item>
      <el-form-item label="生效起期" prop="beginTime">
        <el-date-picker v-model="ruleForm.beginTime" type="date" placeholder="选择日期"/>
      </el-form-item>
       <el-form-item label="生效止期" prop="endTime">
        <el-date-picker v-model="ruleForm.endTime" type="date" placeholder="选择日期"/>
      </el-form-item>
       <el-form-item label="特别约定" prop="remark">
        <el-input
        type="textarea"
        :rows="2"
        size="medium"
        class="input-width"
        v-model="ruleForm.remark"
        placeholder="请输入内容"
      />
      </el-form-item>
      <el-form-item label="保单状态" prop="state">
        <el-radio-group v-model="ruleForm.state">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">中止</el-radio>
            <el-radio label="2">终止</el-radio>
            <el-radio label="3">失效</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="cancle">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getCompany, getGoods, paperTypeList, sexList } from "data/listBody";
import check from "utils/check";
import { DateDay } from "utils/formData";
const goodsTips = ["请先选择所属企业信息", "请先新建商品信息"];
const requireArray = [
  "userName",
  "ptGoodsId",
  "companyId",
  "paperType",
  "paper",
  "mobile"
]; //必传字段
export default {
  name: "addUser",
  data() {
    return {
      ruleForm:{
        companyId: "",
        ptGoodsId: "",
        userName: "",
         sex: "",
         paperType: "1",
         paper: "",
      mobile: "",
      email: "",
      cardNum: "",
      beginTime: "",
      endTime: "",
      remark: "",
      state: "0"
      },
      rules: {
          companyId: [
            { required: true, message: '请选择所属企业', trigger: 'change' }
          ],
          ptGoodsId: [
            { required: true, message: '请选择所属商品', trigger: 'change' }
          ],
          userName: [
            { required: true, message: '请输入被服务人姓名', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '请选择被服务人性别', trigger: 'change' }
          ],
          paperType: [
            { required: true, message: '请选择被服务人证件类型', trigger: 'change' }
          ],
          paper: [
            { required: true, message: '请输入被服务人证件号码', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请输入被服务人电话号码', trigger: 'blur' }
          ]
        },
      companyList: "",
      goodsList: [],
      goodsTip: goodsTips[0],
      sexList,
      paperTypeList,
      check: check.methods.check,
      checkTip: check.tips.checkTip
    };
  },
  mounted() {
    this.editInit();
  },
  methods: {
    editInit() {
      getCompany(data => {
        this.companyList = data.list;
      });
    },
    submit() {
      this.ruleForm.beginTime = DateDay(this.ruleForm.beginTime);
      this.ruleForm.endTime = DateDay(this.ruleForm.endTime);
      this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.addUser(this.ruleForm);
          } else {
            console.log('error submit!!');
            return false;
          }
      });
    },
    addUser(param) {
      //添加用户
      if (this.$route.query.type === "edit") return this.editUser(param);
      this.loading = true;
      this.api
        .post("/customer", param)
        .then(res => {
          this.$router.go(-1);
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
          this.loading = false;
          this.$message(err.data.message);
        });
    },
    getProduct(){
      this.ruleForm.ptGoodsId = "";
      getGoods(this.ruleForm.companyId, data => {
        this.goodsList = data.list;
        if (data.list.length < 1) return (this.goodsTip = goodsTips[1]);
      });
    },
    cancle() {
      this.$router.go(-1);
    }
  },
  // watch: {
  //   companyId(newVal, oldVal) {
  //     getGoods(newVal, data => {
  //       this.ruleForm.ptGoodsId = "";
  //       this.goodsList = data.list;
  //       if (data.list.length < 1) return (this.goodsTip = goodsTips[1]);
  //     });
  //   }
  // }
};
</script>
 
<style lang="less" scoped>
.red {
      color: red;
      font-size: 12px;
    }
.input-width {
  width:300px;
}    
.select-width {
   width:300px;
}
</style>
 